<template>
  <div class="consumptionDetails-body">
    <custom title="消费明细" />
    <div class="consumptionDetails-img">
      <img :src="merchantName" alt="" class="imgname" />
      <p class="exceedOne">{{ mermberInfo.merchantName }}</p>
      <img :src="segmentation2x" alt="" class="se" />
    </div>
    <div class="consumptionDetails-content">
      <div class="content-item">
        <div class="label">消费金额</div>
        <div class="input orange">¥ {{ info.amount }}</div>
      </div>
      <div class="content-item">
        <div class="label">类型</div>
        <div class="input">消费</div>
      </div>
      <div class="content-item">
        <div class="label">时间</div>
        <div class="input">{{ info.orderTime }}</div>
      </div>
      <div class="content-item">
        <div class="label">订单号</div>
        <div class="exceedOne input">{{ info.orderNo }}</div>
      </div>
      <div class="content-item">
        <div class="label">卡余额</div>
        <div class="input">{{ info.currentBalance }}</div>
      </div>
      <div class="content-item">
        <div class="label">备注</div>
        <div class="input">{{ info.remark }}</div>
      </div>
    </div>
    <div class="back" @click="onBack()">
      返回
    </div>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
import merchantName from '@/assets/usercardbill/merchantName.png'
import segmentation2x from '@/assets/usercardbill/segmentation2x.png'
import { commonAjax } from 'Ajax'
export default {
  name: 'ConsumptionDetails',
  components: { custom },
  data() {
    return {
      merchantName,
      segmentation2x,
      info: {},
      mermberInfo: {}
    }
  },
  mounted() {
    this.info = this.$store.state.public.temporary
    this.info.amount = Math.abs(this.info.amount)
    this.$store.dispatch('public/setTem', '')
    this.init()
  },
  methods: {
    init() {
      commonAjax.getMemberDetail().then(res => {
        this.mermberInfo = res
      })
    },
    onBack: function() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
.consumptionDetails-body {
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
}
.consumptionDetails-img {
  .imgname {
    width: 150px;
    height: 150px;
    margin: 77px 300px 0 299px;
  }
  p {
    font-size: 30px;
    width: 600px;
    text-align: center;
    margin: 0 auto;
    padding: 0;
  }
  .se {
    width: 100%;
    height: 100px;
    background: #f2f2f2;
  }
}
.consumptionDetails-content {
  .content-item {
    height: 68px;
    line-height: 68px;
    font-size: 28px;
    font-weight: 400;
    display: flex;
    .label {
      width: 161px;
      margin-left: 58px;
      color: #a1a1a1;
    }
    .input {
      color: #000000;
      width: 446px;
    }
    .orange {
      color: #f35517;
    }
  }
}
.back {
  width: 510px;
  height: 80px;
  background: #ffffff;
  border: 1px solid #f35517;
  border-radius: 16px;
  text-align: center;
  line-height: 80px;
  margin: 0 auto;
  margin-top: 220px;
  font-size: 30px;
  color: #f35517;
}
</style>
